import { EVENT_TYPE } from '@/utils';
import { useEffect, useState } from 'react';
import { io } from 'socket.io-client';
import styles from './index.modules.less';

export default () => {
  const [status1, setStatus1] = useState('待出仓');
  const [status2, setStatus2] = useState('待提押');

  const init = () => {
    const socket = io('wss://zkapi.lvseguanjia.cn:16064', {
      ackTimeout: 10000,
      retries: 3,
      auth: {
        serverOffset: 0,
      },
      port: 3000,
    });
    console.log('😈初始化socket');
    socket.on(EVENT_TYPE.BEGIN_IN_REGIS, () => {
      setStatus1('已回仓');
      setStatus2('已带回');
    });

    socket.on(EVENT_TYPE.BEGIN_OUT_REGIS, () => {
      setStatus1('已出仓');
      setStatus2('已提押');
    });
  };

  useEffect(() => {
    init();
  }, []);
  return (
    <div className={styles.container}>
      <div className={styles.left}>
        <h1>会见信息显示屏</h1>
        <div className={styles.content}>
          <div className={styles.row}>
            李律师 请到 会见室A 进行会见
            <div className="ml10" style={{ color: 'orange' }}>
              {status1}
            </div>
          </div>
          <div className={styles.row}>
            刘律师 请到 会见室B 进行会见
            <div className="ml10" style={{ color: 'orange' }}>
              已回仓
            </div>
          </div>
          <div className={styles.row}>-</div>
          <div className={styles.row}>-</div>
        </div>
      </div>
      <div className={styles.right}>
        <h1>提押岗显示屏</h1>
        <div className={styles.content}>
          <div className={styles.row}>
            请到 A区201 室提押 嫌疑人A 到 会见室A 会见
            <div className="ml10" style={{ color: 'orange' }}>
              {status2}
            </div>
          </div>
          <div className={styles.row}>
            请到 A区202 室提押 嫌疑人B 到 会见室B 会见
            <div className="ml10" style={{ color: 'orange' }}>
              已带回
            </div>
          </div>
          <div className={styles.row}>-</div>
          <div className={styles.row}>-</div>
        </div>
      </div>
    </div>
  );
};
